import DB2Image from '@/assets/DB2.png';
import MySQLImage from '@/assets/MySQL.png';
import ORACLEImage from '@/assets/ORACLE.png';
import DataBase from '@/services/data-factory';
import { ProForm } from '@ant-design/pro-components';
import { Form, Image, Input, message, Modal, Space } from 'antd';
import React, { PropsWithChildren, useEffect, useState } from 'react';

const { addDatabaseUsingPost, updateDatabaseUsingPut } =
  DataBase.databaseguanlikongzhiqi;
interface CreateFormProps {
  modalVisible: boolean;
  onCancel: () => void;
  onSuccess: () => void; // 增加成功回调
  getDataStandardList: () => void; // 增加成功回调
  onClickImage?: (index: number) => void; // 新增点击事件回调
}
interface FieldType {
  // databaseId: number;
  categoryId: number;
  datasourceName: string;
  datasourceDescription: string;
  connInformation: string;
  username: string;
  password: string;
}
const CreateForm: React.FC<
  PropsWithChildren<CreateFormProps & { databaseId?: string }>
> = (props) => {
  const { modalVisible, onCancel, getDataBaseList, initialValues } = props;
  const [form] = Form.useForm();
  const [showForm, setShowForm] = useState(false); // 新增状态控制 ProForm 显示
  const [databaseType, setDatabaseType] = useState<string | null>(null); // 新增状态保存数据库类型
  const [showImageContainer, setShowImageContainer] = useState(true); // 新增状态控制图片容器显示
  // const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [modalTitle, setModalTitle] = useState('选择数据库类型'); // 新增状态保存弹框标题
  // const onSuccess = () => {
  //   console.log(createModalVisible);
  //   handleModalVisible(false);
  // };

  // 图片点击处理函数
  const handleImageClick = (index: number) => {
    // jdbc:mysql://localhost:3306/demo
    const dbConfig = [
      { type: 'MySql', url: 'jdbc:mysql://localhost:3306/', categoryId: 1 },
      {
        type: 'ORACLE',
        url: 'jdbc:oracle:thin:@localhost:1521:',
        categoryId: 2,
      },
      { type: 'DB2', url: 'jdbc:db2://localhost:50000/', categoryId: 3 },
    ];

    const config = dbConfig[index];
    setDatabaseType(config.type); // 设置数据库类型
    setShowForm(true); // 显示 ProForm
    // form.setFieldsValue({ databaseId: config.type }); // 自动填充数据库类型
    form.setFieldsValue({ categoryId: config.categoryId }); // 自动填充数据库类型
    setShowImageContainer(false); // 隐藏图片容器
    setModalTitle('添加数据库'); // 更新弹框标题
  };

  // // 重置
  // const onReset = () => {
  //   form.resetFields();
  // };
  // 编辑
  // 使用 useEffect 来设置表单的初始值
  useEffect(() => {
    if (initialValues) {
      form.setFieldsValue({
        categoryId: initialValues.categoryId,
        datasourceName: initialValues.datasourceName,
        datasourceDescription: initialValues.datasourceDescription,
        connInformation: initialValues.connInformation,
        username: initialValues.username,
        password: initialValues.password,
      });
      // 根据 categoryId 设置 databaseType
      const dbConfig = [
        { type: 'MySql', url: 'jdbc:mysql://localhost:3306/', categoryId: 1 },
        {
          type: 'ORACLE',
          url: 'jdbc:oracle:thin:@localhost:1521:',
          categoryId: 2,
        },
        { type: 'DB2', url: 'jdbc:db2://localhost:50000/', categoryId: 3 },
      ];

      const config = dbConfig.find(
        (config) => config.categoryId === initialValues.categoryId,
      );
      if (config) {
        setDatabaseType(config.type);
      }

      setShowForm(true);
      setShowImageContainer(false);
      setModalTitle('编辑数据库');
    } else {
      // 如果没有 initialValues，则显示图片容器
      setShowImageContainer(true);
      setModalTitle('选择数据库类型');
    }
  }, [initialValues, form]);

  // 重置状态
  const resetState = () => {
    setShowForm(false); // 隐藏 ProForm
    setShowImageContainer(true); // 显示图片容器
    form.resetFields(); // 重置表单
    setModalTitle('选择数据库类型'); // 重置弹框标题
  };
  // 新增 编辑表单切换
  useEffect(() => {
    if (!modalVisible) {
      resetState();
    } else {
      if (initialValues && Object.keys(initialValues).length > 0) {
        // 编辑模式
        form.setFieldsValue(initialValues);
        setModalTitle('编辑数据库');
        setShowForm(true);
        setShowImageContainer(false);
      } else {
        // 新增模式
        resetState();
        setModalTitle('选择数据库类型');
        setShowImageContainer(true);
        setShowForm(false);
      }
    }
  }, [modalVisible, initialValues]);
  //
  // 提交处理
  const handleSubmit = async () => {
    try {
      await form.validateFields();

      const payload = {
        databaseId: initialValues?.databaseId, // 从 initialValues 中获取 databaseId
        categoryId: form.getFieldValue('categoryId')!,
        datasourceName: form.getFieldValue('datasourceName')!,
        datasourceDescription: form.getFieldValue('datasourceDescription'),
        connInformation: form.getFieldValue('connInformation')!,
        username: form.getFieldValue('username'),
        password: form.getFieldValue('password'),
      };
      let response;
      if (payload.databaseId) {
        // 如果有 c，则调用更新接口
        response = await updateDatabaseUsingPut(payload);
      } else {
        // 否则调用新增接口
        response = await addDatabaseUsingPost(payload);
      }

      if (response.code === 100200) {
        message.success('操作成功');
        getDataBaseList();
        resetState();
        props.onCancel();
      } else {
        message.error(response.msg || '操作失败');
      }
    } catch (error) {
      console.error('提交错误:', error);
      message.error('表单验证失败，请检查输入');
    }
  };
  return (
    <Modal
      destroyOnClose
      title={modalTitle}
      // title={`${props.standardId ? '编辑' : '新增'}`}
      width={600}
      open={modalVisible}
      onCancel={() => {
        onCancel();
        resetState(); // 关闭弹框时重置状态
      }}
      footer={null}
      style={{ backgroundColor: 'gray', borderColor: 'red' }}
    >
      {showImageContainer && (
        <div className="image-container" style={{ marginBottom: '36px' }}>
          <Space>
            <Image
              width={100}
              height={100}
              preview={false} // 禁用图片预览
              src={MySQLImage}
              onClick={() => handleImageClick(0)}
              style={{
                margin: '16px',
                cursor: 'pointer',
                border: '2px solid skyblue',
              }}
            />
            <Image
              width={100}
              height={100}
              preview={false} // 禁用图片预览
              src={ORACLEImage}
              onClick={() => handleImageClick(1)}
              style={{
                margin: '16px',
                cursor: 'pointer',
                border: '2px solid skyblue',
              }}
            />
            <Image
              width={100}
              height={100}
              preview={false} // 禁用图片预览
              src={DB2Image}
              onClick={() => handleImageClick(2)}
              style={{
                margin: '16px',
                cursor: 'pointer',
                border: '2px solid skyblue',
              }}
            />
          </Space>
        </div>
      )}
      {showForm && (
        <ProForm
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 20 }}
          style={{ maxWidth: 600 }}
          submitter={{
            // 自定义提交按钮布局
            render: (_, dom) => (
              <div style={{ textAlign: 'right' }}>
                <Space>{dom}</Space>
              </div>
            ),
            onSubmit: handleSubmit, // 添加 onSubmit 回调
          }}
        >
          <Form.Item<FieldType>
            label="数据库类型"
            name="categoryId"
            rules={[{ required: true, message: '请输入数据库类型!' }]}
          >
            {/* <Input disabled /> */}
            <span
              style={{
                display: 'inline-block',
                width: '100%',
                padding: '4px 11px',
                border: '1px solid #d9d9d9',
                borderRadius: '2px',
                backgroundColor: '#f5f5f5',
                color: 'rgba(0, 0, 0, 0.25)',
                cursor: 'not-allowed',
                transition: 'all 0.3s',
              }}
            >
              {databaseType || '请选择数据库类型'}
            </span>
          </Form.Item>

          <Form.Item<FieldType>
            label="数据源名称"
            name="datasourceName"
            rules={[{ required: true, message: '请输入数据源名称!' }]}
          >
            <Input placeholder="请输入数据源名称" />
          </Form.Item>
          <Form.Item<FieldType> label="数据源描述" name="datasourceDescription">
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="JDBC URL"
            name="connInformation"
            tooltip="示例:jdbc:mysql://localhost:3306/test"
            rules={[{ required: true, message: '请输入数据库路径!' }]}
          >
            <Input placeholder="请输入数据库路径" />
          </Form.Item>
          <Form.Item<FieldType> label="用户名" name="username">
            <Input />
          </Form.Item>
          <Form.Item<FieldType> label="密码" name="password">
            <Input />
          </Form.Item>
        </ProForm>
      )}
    </Modal>
  );
};

export default CreateForm;
